<template>
    <el-dialog :title="dialogTitle" width="30%" @close="handleClose">
        <el-form ref="formRef" :model="form" label-width="100px">

            <el-form-item label="活动名称" prop="name">
                <el-input v-model="form.name" :disabled="form.id == '' ? false : 'disabled'" />
            </el-form-item>

            <el-form-item label="活动负责人" prop="owner">
                <el-select v-model="form.owner" placeholder="活动负责人" size="large" style="width: 240px">
                    <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>

            <el-form-item label="活动经费" prop="cost">
                <el-input v-model="form.cost" />
            </el-form-item>

            <el-form-item label="活动开始时间" prop="startDate">
                <el-input v-model="form.startDate" type="date" style="width: 240px;margin: 0 10px; margin-bottom: 10px"
                    format="YYYY-MM-DD" :suffix-icon="Calendar" clearable>
                </el-input>
            </el-form-item>
            <el-form-item label="活动结束" prop="endDate">
                <el-input v-model="form.endDate" type="date" style="width: 240px;margin: 0 10px; margin-bottom: 10px"
                    format="YYYY-MM-DD" :suffix-icon="Calendar" clearable></el-input>
            </el-form-item>

            <el-form-item label="活动描述" prop="description">
                <el-input v-model="form.description" />
            </el-form-item>





        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="handleConfirm">确认</el-button>
                <el-button @click="handleClose">取消</el-button>
            </span>
        </template>
    </el-dialog>

</template>

<script setup>
import { defineEmits, defineProps, ref, watch } from "vue"
import requestUtil from "@/util/request";
import { ElMessage } from 'element-plus'

const props = defineProps(
    {
        id: {
            type: String,
            default: "",
            required: true
        },
        dialogTitle: {
            type: String,
            default: '',
            required: true
        },
        dialogVisible: {
            type: Boolean,
            default: false,
            required: true
        }
    }
)
//表单数据
const form = ref({
    id: "",
    owner: "",
    name: "",
    startDate: "",
    endDate: "",
    cost: "",
    description: "",
})
//初始化用户列表
const userList = ref([])
const initUserList = async () => {
    const res = await requestUtil.get("/user/ownerList");
    userList.value = res.data.data
}
initUserList();


const formRef = ref(null)

const initFormData = async () => {
    const res = await requestUtil.getRestFulApi("crmActivity/get/{id}" , {id:props.id},"");
    form.value = res.data.data;
}

watch(
    () => props.dialogVisible,
    () => {
        let id = props.id;
        if (id != "" && props.dialogVisible) {
            initFormData(id);
        } else {
            form.value = {
                id: "",
                owner: "",
                name: "",
                startDate: "",
                endDate: "",
                cost: "",
                description: "",
            }
        }
    }
)

const emits = defineEmits(['update:modelValue', 'initActiveList'])
//关闭from表单
const handleClose = () => {
    emits('update:modelValue', false)
}

const handleConfirm = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            let data;
            if (Boolean(form.value.id)) {
                let result = await requestUtil.post("crmActivity/update", form.value);
                data = result.data;
            } else{
                let result = await requestUtil.post("crmActivity/save", form.value);
                data = result.data;
            }
            if (data.code == 1) {
                ElMessage.success("执行成功！")
                formRef.value.resetFields();
                form.value = {};
                emits("initActiveList")
                handleClose();
            } else {
                ElMessage.error(data.message);
            }
        } else {
            ElMessage.error(fail);

        }
    })
}

</script>

<style lang="scss" scoped></style>